<template>
    <div>
      <h3>猜你喜欢</h3>
          <div class="guess">
              <span v-for="(item,index) in guessArr" @click="handleClick(index)" :key="index" :class="{active: currentIndex == index }">{{item}}</span>
          </div>
          <div class="chose">
              <div class="box">年货节热卖</div>
              <div class="box">津贴联盟</div>
              <div class="box">满减优惠</div>
              <div class="box">品质联盟</div>
          </div>
          <div class="list">
              <div class="info" v-for="(item,index) in infoArr" :key="index">
                  <img :src="item.picUrl" alt="" width="100px" height="100px">
                  <p class="title">{{item.name}}</p>
                  <br>
                  <span class="xin">{{item.xin}}</span>
                  <span class="sum">{{item.MonthSalesTip}}</span>
                  <br>
                  <span class="bot">{{item.minPriceTip}}</span>
                  <span class="far">{{item.averagePriceTip}}</span>
                  <span class="km">{{item.distance}}</span>
                  <span class="min">{{item.deliveryTimeTip}}</span>
                  <br>
                  <span class="pj"  >{{item.name}}</span>
                  <br>
                  <ul>
                      <li class="ac"  >{{item.wmPoiScore}}</li>
                  </ul>
              </div>
          </div>
    </div>
  </template>
  
  <script>
  import {shop_list,tuan_list,user_login} from '../../utils/api.js'
  export default {
       data(){
          return {
          currentIndex: 0,
          guessArr:["综合排序","距离最近","销量最高","筛选"],
          infoArr:[]
          }
      },
      methods:{
           handleClick(index){
              this.currentIndex = index;
          }
      },
       mounted(){
          shop_list().then((res)=>{
              this.infoArr = res.data.list;
      })
      }
  }
  </script>
  
  <style lang="scss" scoped>
  
      h3 {
              margin: 10px 6px;
          }
  
          .guess {
              width: 96%;
              margin: auto;
              display: flex;
              justify-content: space-between;
              font-size: 14px;
          }
  
          .chose {
              width: 96%;
              margin: auto;
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
          }
  
          .chose .box {
              background-color: #f5f5f5;
              padding: 5px 15px;
              font-size: 12px;
              border-radius: 5px;
          }
  
          .list {
              width: 96%;
              margin: auto;
              margin-top: 20px;
          }
  
          .info {
              height: 142px;
              margin-bottom: 10px;
          }
  
          .info img {
              float: left;
          }
  
          .info .title {
              font-size: 12px;
              font-weight: bold;
              margin-left: 10px;
              display: inline-block;
              margin-bottom: 10px;
          }
  
          .info .xin {
              color: orange;
              font-size: 10px;
              margin-left: 10px;
          }
  
          .info .sum {
              color: #999;
              font-size: 10px;
              margin-left: 10px;
          }
  
          .info .bot {
              color: #999;
              font-size: 10px;
              margin-left: 10px;
          }
  
          .info .far {
              color: #999;
              font-size: 10px;
              margin-left: 10px;
          }
  
          .info .min {
              color: #999;
              font-size: 10px;
              float: right;
              margin-top: 4px;
          }
  
          .info .km {
              color: #999;
              font-size: 10px;
              margin-left: 10px;
              margin-top: 4px;
              float: right;
          }
  
          .info .pj {
              padding: 2px;
              margin-left: 10px;
              background-color: orange;
              color: orangered;
              font-size: 10px;
          }
          ul {
              list-style: none;
              margin-top: 10px;
              margin-left: 100px;
          }
  
          li {
              font-size: 12px;
              float: left;
              text-align: center;
              width: 50px;
              height: 20px;
              border: 1px solid red;
              color: red;
              margin-left: 10px;
              line-height: 20px;
              border-radius: 4px;
          }
          .active{
              color:red;
          }
  </style>